<!-- 商务合作 -->
<template>
	<view class="container bg">
		<Navbar title="商务合作" />
		
		<view class="content pt-50 d-flex">
			<view class="head mb-70 d-flex">
				<image src="/static/image/my/logo.svg" mode="widthFix" class="head_logo mb-30"></image>
				<text class="head_title">数据精灵</text>
			</view>
			
			<text class="descripe mb-60">感谢您关注并支持数据精灵的发展，如果您需进行任何形式的商务合作，请i联系：</text>
			
			<view class="list">
				<view class="list_item mb-50 relative">
					<text class="list_item_label mb-10">邮箱</text>
					<view class="list_item_info">
						<text class="list_item_info_value">{{ info.email }}</text>
						
						<text class="activeText list_item_info_value" @tap="copy">复制</text>
					</view>
				</view>
				
				<view class="list_item relative">
					<text class="list_item_label mb-20">客服电话</text>
					<view class="list_item_info">
						<text class="list_item_info_value">{{ info.phone }}</text>
						
						<text class="activeText list_item_info_value" @tap="tel">立即拨打</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive} from 'vue'
	import Navbar from '@/components/Navbar/index.vue'
	
	const info = reactive({
		email: 'energy_beat@163.com',
		phone: '13710080529'
	})
	
	// 复制
	const copy = () => {
		uni.setClipboardData({
			data: info.email,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 3000
				})
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					duration: 3000
				})
			}
		})
	}
	
	// 拨打电话
	const tel = () => {
		uni.makePhoneCall({
			phoneNumber: info.phone
		})
	}
</script>

<style scoped lang="scss">
.content {
	padding: 25rpx 50rpx;
	flex-direction: column;
	.head {
		flex-direction: column;
		align-items: center;
		
		&_logo {
			width: 160rpx;
		}
		
		&_title {
			color: #404040;
			font: {
				size: 36rpx;
				weight: bold;
			}
		}
	}
	
	.descripe {
		line-height: 40rpx;
		color: #404040;
		font: {
			size: 24rpx;
		}
	}
	
	.list {
		overflow: visible;
		&_item {
			padding: 20rpx 25rpx;
			background-color: #fff;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
			border-radius: 30rpx;
			border-top: 18rpx solid #D9E4F9;
			border-left: 4rpx solid #D9E4F9;
			
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: -40rpx;
				z-index: -1;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
				background-color: #D9E4F9;
			}
			
			&_label {
				font: {
					weight: bold;
				}
			}
			
			&_info {
				flex-direction: row;
				align-items: center;
				
				&_value {
					font: {
						size: 26rpx;
					}
					
					&:not(.activeText) {
						width: 360rpx;
					}
				}
			}
		}
	}
}
</style>
